<template>
	<z-paging ref="paging" class="group_1" v-model="starList" @query="getStarList"
		:hide-loading-more-when-no-more-by-limit="5">
		<view class="flex-row group_2" v-for="item in starList" :key="item._id">
			<u-image :src="item.detail.thumb" :lazy-load="true" width="284" height="182" border-radius="8rpx"
				mode="aspectFill">
			</u-image>
			<view class="flex-col group_3">
				<text class="text_1">{{item.detail.title}}</text>
				<view class="justify-between group_4">
					<text class="text_2">共{{item.detail.videos.length}}节课</text>
					<view class="right-text-wrapper flex-col items-center" @tap="cancelStar(item.course_id)">
						<text>取消收藏</text>
					</view>
				</view>
			</view>
		</view>
	</z-paging>
</template>

<script>
	var that; // 当前页面对象
	var vk; // vk依赖
	export default {
		data() {
			// 页面数据变量
			return {
				starList: []
			}
		},
		// 监听 - 页面每次【加载时】执行(如：前进)
		onLoad(options = {}) {
			that = this;
			vk = that.vk;
			that.init(options)
		},
		// 监听 - 页面【首次渲染完成时】执行。注意如果渲染速度快，会在页面进入动画完成前触发
		onReady() {},
		// 监听 - 页面每次【显示时】执行(如：前进和返回) (页面每次出现在屏幕上都触发，包括从下级页面点返回露出当前页面)
		onShow() {},
		// 监听 - 页面每次【隐藏时】执行(如：返回)
		onHide() {},
		// 函数
		methods: {
			// 页面数据初始化函数
			init(options) {},
			// 获取收藏列表
			getStarList(pageNo, pageSize) {
				vk.callFunction({
					url: 'client/course/pub/my_course_collection',
					data: { pageIndex: pageNo, pageSize: pageSize, need_user_info: true },
					success(data) {
						that.$refs.paging.complete(data.rows);
					}
				})
			},
			// 修改收藏状态
			cancelStar(id) {
				uni.vk.callFunction({
					url: 'client/course/pub/change_star',
					title: "加载中...",
					data: {
						course_id: id,
						status: 1, // 当前收藏状态
						need_user_info: true
					},
					success(res) {
						that.$refs.paging.reload()
					}
				})
			}
		},
	}
</script>

<style lang="scss" scoped>
	.group_1 {
		padding: 31rpx 17rpx 0;

		.group_2 {
			margin-bottom: 60rpx;
		}

		.group_3 {
			margin-left: 26rpx;
			margin-right: 3rpx;
			flex: 1 1 auto;

			.text_1 {
				margin-right: 4rpx;
				color: rgb(51, 51, 51);
				font-size: 30rpx;
				line-height: 35rpx;
				text-align: left;
			}

			.group_4 {
				margin-top: 57rpx;

				.text_2 {
					margin-top: 25rpx;
					color: rgb(153, 153, 153);
					font-size: 24rpx;
					line-height: 29rpx;
					white-space: nowrap;
				}
			}
		}

		.right-text-wrapper {
			color: rgb(255, 255, 255);
			font-size: 24rpx;
			line-height: 29rpx;
			white-space: nowrap;
			padding: 14rpx 0 12rpx;
			background-color: rgb(51, 51, 51);
			border-radius: 27rpx;
			width: 160rpx;
			height: 54rpx;
		}
	}
</style>
